<template>
  <view>
    <view class="list">
      <view
          @tap="toDetail(item)"
          class="item"
          v-for="(item, index) in list"
          :key="index"
      >
        <view><image mode="widthFix" :src="item.thumb" style="width: 100%"></image></view>
        <view class="title">{{ item.title }}</view>
      </view>
    </view>
    <view style="margin-top: 60rpx;">
      <u-empty icon="/static/ic_empty_list.png" v-if="isEmpty"></u-empty>
      <u-loadmore
          @loadmore="listLoadMore"
          marginTop="40rpx"
          :status="status"
          v-if="!isEmpty"
      ></u-loadmore>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 20,
      status: '',
      isEmpty: true,
      list: [],
    };
  },
  onLoad(option) {
    this.status = 'loading';
    this.getList(1);
  },
  onPullDownRefresh() {
    this.list = [];
    this.getList(1);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    getList(isRefresh = 0) {
      this.isEmpty = false;
      this.status = 'loading';
      if (isRefresh) {
        this.page = 1
        this.list = []
      }
      this.$util.request({
        url: '/article/getList',
        data: {
          type: 'help',
          page: this.page,
          limit: this.limit
        }
      }).then(res => {
        this.list = this.list.concat(res.data.list)
        this.total = res.data.total;
        this.isEmpty = (this.list.length === 0);
        this.status = this.list.length < res.data.total ? 'loadmore' : 'nomore';
      })
    },
    listLoadMore() {
      this.page += 1;
      this.getList();
    },
    toDetail(article) {
      if (article.content_type === 'link') {
        this.$util.openUrl(article.link_url)
      } else {
        uni.navigateTo({
          url: '/pages/article/detail?type=' + article.type + '&id=' + article.id
        });
      }
    }
  }
}
</script>
<style scoped>
@import './list.css';
</style>
